<template>
  <a-input>
    <template v-for="item in slotKeys.filter(key=>props[key])" #[item]>
      <component :is="renderSlot(props,item)"/>
    </template>
    <template #prefix v-if="!prefix&&prefixIcon">
      <m-icon :icon="prefixIcon"/>
    </template>
    <template #suffix v-if="!suffix&&suffixIcon">
      <m-icon :icon="suffixIcon"/>
    </template>
  </a-input>
</template>
<script setup lang="ts">
import { PropType, VNode, h } from 'vue';
import { renderSlot } from '../index'
const slotKeys = ['addonAfter','addonBefore','prefix','suffix']
const props = defineProps({
  prefixIcon: { // 前辍图标
    type: String
  },
  suffixIcon: { // 后辍图标
    type: String
  },
  addonAfter: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  addonBefore: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  prefix: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  suffix: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  }
})

</script>
<style lang="less" scoped>

</style>